<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Untitled Document</title>
        <link type="text/css" rel="stylesheet" media="screen" href="resource/js/jqgrid/themes/redmond/jquery-ui-1.8.2.custom.css"/>
        <link type="text/css" rel="stylesheet" media="screen" href="resource/js/jqgrid/themes/ui.jqgrid.css"/>
        <link type="text/css" rel="stylesheet" media="screen" href="resource/css/sexyButtons/sexybuttons.css"/>
        <link type="text/css" rel="stylesheet" media="screen" href="resource/js/asyncbox/skins/QQBrowser/asyncbox.css" />
        <script type="text/javascript" src="resource/js/jquery/jquery.js"></script>
        <script type="text/javascript" src="resource/js/jqgrid/js/jquery-ui-1.8.2.custom.min.js"></script>
        <script type="text/javascript" src="resource/js/jqgrid/js/i18n/grid.locale-en.js"></script>
        <script type="text/javascript" src="resource/js/jqgrid/js/jquery.jqGrid.min.js"></script>
        <script type="text/javascript" src="resource/js/asyncbox/AsyncBox.v1.4.js"></script>
        <style type="text/css">
        	
        </style>
        <script type="text/javascript">
            $(document).ready(function(){
                jQuery("#jsonmap").jqGrid({
                    url: 'http://127.0.0.1:8088/dwrdemo/json.jsp',
                    datatype: 'json',
                    colNames: ['编号', '姓名', '密码', '年龄', '地址', '出生日期'],
                    colModel: [{
                        name: 'id',
                        index: 'id',
                        width: 90,
                        sorttype: "int",
                        editable : true,
                        editoptions:{readonly:true,size:10}
                    }, {
                        name: 'username',
                        index: 'name',
                        width: 110,
                        sorttype: "int"
                    }, {
                        name: 'password',
                        index: 'password',
                        width: 80
                    }, {
                        name: 'age',
                        index: 'age',
                        width: 80
                    }, {
                        name: 'address',
                        index: 'address',
                        width: 80
                    }, {
                        name: 'time',
                        index: 'time',
                        width: 80,
                        sorttype: "date"
                    }],
                    
                    //imgpath: WEB_PATH + '/resources/javascript/plugins/jqgrid/css/smoothness/images',
                    rowNum: 15,
                    rowList: [15, 30, 35],
                    pager: "pjmap",
                    
                    toolbar:[true,'top'],
                    rownumbers: true,
                    multiselect: false,
                    sortname: 'id',
                    viewrecords: true,
                    sortorder: "desc",
                    jsonReader: {
                        root: "rows",
                        repeatitems: false
                    },
                    caption: "测试页面",
                    height: 361,
					autowidth:true
                }).navGrid('pjmap', {
                    view: true,
                    edit: true,
                    add: true,
                    del: true
                }, {
                    closeOnEscape: true
                });
                
                //测试获取选中行信息
                $("#info").live('click',function(){
                	var id = $("#jsonmap").jqGrid('getGridParam','selrow');
                	if (id)	{
                		var ret = $("#jsonmap").jqGrid('getRowData',id);
                		asyncbox.alert("id="+ret.id+" username="+ret.username+"...");
                	} else { asyncbox.alert("Please select row");}
                });
                
                //测试删除行
                $("#delete").live('click',function(){
                	var result = $("#jsonmap").jqGrid('delRowData','id0');
                	if(result) {
                		alert("success");
                	}
                });
                
                //测试查找
                $("#search").live('click',function(){
                	$("#jsonmap").jqGrid('searchGrid',{
                		sopt:['cn','bw','eq','ne','lt','gt','ew'],
                		caption:'查找',
                		top:50,
                		left:300,
                		Find:'查找',
                		Reset:'重置'
                	});
                });
                
                //测试编辑行
                $("#edit").live('click',function(){
                	var gr = $("#jsonmap").jqGrid('getGridParam','selrow');
                	if( gr != null ) 
                		$("#jsonmap").jqGrid('editGridRow',gr,{
                			top: 50,
                			left: 300,
	                		height:280,
	                		bSubmit: '提交',
	                		bCancel: '取消',
	                		reloadAfterSubmit:false
                		});
                	else alert("Please Select Row");
                });
                
                $("#new").live('click',function(){
                	document.location.href = "testForm.html";
                });
                
                $("#t_jsonmap").append("<button class='sexybutton sexysimple sexygreen' id='info'><span class='info'>选择</span></button>");
                $("#t_jsonmap").append("<button class='sexybutton sexysimple sexygreen' id='delete'><span class='delete'>删除</span></button>");
                $("#t_jsonmap").append("<button class='sexybutton sexysimple sexygreen' id='search'><span class='search'>查找</span></button>");
                $("#t_jsonmap").append("<button class='sexybutton sexysimple sexygreen' id='edit'><span class='edit'>编辑</span></button>");
                $("#t_jsonmap").append("<button class='sexybutton sexysimple sexygreen' id='new'><span class='add'>新增</span></button>")
            });
            
        </script>
    </head>
    <body style="margin-left: 2px; margin-top:0px; margin-right:2px;">
        <table id="jsonmap">
        </table>
        <div id="pjmap">
        </div>
    </body>
</html>
